import React from 'react';
import { FooterToolbar } from '@ant-design/pro-layout';
import { Pagination, Row, Col } from 'antd';

interface Props {
  footer: string;
  length: number;
  buttonGroup: React.ReactNode;
  onChange?: (page: number, pageSize?: number) => void;
  onShowSizeChange?: (page: number, pageSize: number) => void;
  current: number;
  pageSize?: number;
  pageSizeOptions?: string[];
}

export default function Footer({ footer = '', length = 0, buttonGroup, current = 1, pageSize = 10, pageSizeOptions = ['10', '20', '50', '100'], onChange, onShowSizeChange }: Props) {
  console.log(footer, length, '传递参数');

  return (
    <>
      <FooterToolbar extra={buttonGroup}>
        <Row>
          <Col flex="auto">
            <div className={footer}>
              <Pagination
                defaultCurrent={1}
                current={current ? current : 1}
                total={length ? length : 1}
                pageSize={pageSize}
                pageSizeOptions={pageSizeOptions}
                showSizeChanger
                showQuickJumper
                showTotal={(total) => `共 ${total} 条`}
                onChange={onChange}
                onShowSizeChange={onShowSizeChange}
              />
            </div>
          </Col>
        </Row>
      </FooterToolbar>
    </>
  );
}
